<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1560 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path fill="#3498D8" d="M1462.835 0H97.28A97.792 97.792 0 0 0 0 97.28v829.44A97.792 97.792 0 0 0 97.28 1024h1365.555a97.792 97.792 0 0 0 97.28-97.28V97.28A97.792 97.792 0 0 0 1462.835 0z"/><path fill="#FFF" d="M326.707 526.643h78.029l-39.014-97.28zM1414.093 341.35h-199.68l-48.999 53.658-43.878-53.658H697.293l-38.759 87.757-39.27-87.757h-170.65v39.015l-19.507-39.015H282.83L141.414 682.7h170.65l19.507-53.657h48.743l19.507 53.658h190.157v-39.27l14.643 39.014h97.28l14.643-43.879v43.879h390.093l48.742-53.658 43.879 53.658h199.68L1272.934 512zM824.064 633.907h-53.606V443.75l-82.893 190.157h-48.743L556.134 443.75v190.157h-112.64l-19.507-53.657H307.2l-19.507 53.657h-63.386l102.4-243.814H409.6l92.672 229.171V390.093h92.672l73.165 165.785 68.25-165.785h92.671v243.814zm482.765 0h-73.165l-63.13-82.637-73.164 82.893H877.722v-244.07h224.307l68.505 78.029 73.165-78.03h68.25L1204.429 512zM931.379 438.63v43.879h121.907v48.742H931.38v48.743h136.755l63.386-73.165-58.778-68.199z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconAmex extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
